import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '../utils/storage'

// import Home from '../views/Home.vue'
// import Login from '../views/Login.vue'
// import Layout from '../views/Layout.vue'
// import Register from '../views/Register.vue'
// import Detail from '../views/Detail.vue'
// import Artical from '../views/Artical.vue'
// import Collect from '../views/Collect.vue'
// import Like from '../views/Like.vue'
// import My from '../views//My.vue'

Vue.use(VueRouter)

const routes = [{
        path: '/',
        name: 'Layout',
        redirect: '/Artical',

        component: () =>
            import ('../views/Layout.vue'),


        children: [{
                path: '/Artical',
                name: 'Artical',
                component: () =>
                    import ('../views/Artical.vue')

            },
            {
                path: '/Collect',
                name: 'Collect',
                component: () =>
                    import ('../views/Collect.vue')
            },
            {
                path: '/Like',
                name: 'Like',
                component: () =>
                    import ('../views/Like.vue')
            },
            {
                path: '/My',
                name: 'My',
                component: () =>
                    import ('../views/My.vue')
            }, {
                path: '/Detail/:id',
                name: 'Detail',
                component: () =>
                    import ('../views/Detail.vue') //懒加载
            }

        ]
    },
    {
        path: '/Login',
        name: 'Login',
        component: () =>
            import ('../views/Login.vue')
    }, {
        path: '/Register',
        name: 'Register',
        component: () =>
            import ('../views/Register.vue')
    }
    // {
    //   path: '/',
    //   name: 'Layout',
    //   component: Layout
    // },
    // {
    //   path: '/',
    //   name: 'Layout',
    //   component: Layout
    // },
    // {
    //   path: '/',
    //   name: 'Layout',
    //   component: Layout
    // },
    // {
    //   path: '/about',
    //   name: 'About',
    //   // route level code-splitting
    //   // this generates a separate chunk (about.[hash].js) for this route
    //   // which is lazy-loaded when the route is visited.
    //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    // }
]

const router = new VueRouter({
    routes
})

// vue路由内置了一个语法====全局前置守卫： **
// 任何路由，被解析访问前，都会先执行这个回调
//路由地址改变就会执行这个狗子函数
// 1. from 你从哪里来， 从哪来的路由信息对象
// 2. to   你往哪里去， 到哪去的路由信息对象
console.log(router, 777)
const white = ['/Login', '/Register'] // 白名单列表，记录无需权限访问的所有页面
router.beforeEach((to, from, next) => {
    // console.log(from, 'from') 
    // console.log(to, 'to')
    //如果有token值就放行.没有就跳到登录页面(登录和注册页除外)
    var token = getToken()
    if (token) {
        next() //放行
    } else {
        if (white.includes(to.path)) {
            next()
        } else {
            next('/Login') // next(路径) 拦截到某个路径页面
        }
    }
})

export default router
//注意区分请求拦截器和路由拦截器//只要发送请求,请求拦截器就会生效,响应拦截器,也和token相关
//路由拦截器:和路由相关,只要路由值发生改变就会触发,主要也和token相关